<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="search">
      <Form
        :model="formItem"
        :label-width="100"
        style="display:flex;flex-direction:row;align-items:flex-end;flex-flow:wrap;height:85px;"
        class="searchForm"
      >
        <FormItem label="专题名称/ID">
          <Input v-model="formItem.keyword" placeholder="专题名称/ID" style="width:150px"></Input>
        </FormItem>

        <FormItem label="专题类型">
          <Select v-model="formItem.type" style="width:150px">
            <Option value="-1">全部</Option>
            <Option value="0">职位专题</Option>
            <Option value="1">企业专题</Option>
          </Select>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>

    <TableList
      :columns="columns"
      :data="resultList"
      :page="formItem.page"
      :total="formItem.pageTotal*formItem.pageNum"
      :pageNum="formItem.pageNum"
      :tableTitle="tableTitle"
      newOne="新建专题"
      @newOneFn="openTopiceEditPage"
      @changePage="changePage"
    ></TableList>

    <Modal v-model="newTopice" title="新建专题" @on-ok="createTopice">
      <Form
        :model="createFormItem"
        :label-width="100"
        style="display:flex;flex-direction:column;height:255px;"
        class="searchForm"
      >
        <FormItem label="专题名称">
          <Input v-model="createFormItem.topice_name" placeholder="专题名称" style="width:150px"></Input>
        </FormItem>
        <FormItem label="专题类型">
          <RadioGroup v-model="createFormItem.topice_type" @on-change="changeRadioGroup">
            <Radio :label="0">职位专题</Radio>
            <Radio :label="1">企业专题</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem :label="createFormItem.topice_type == 0 ? '职位选择' : '企业选择'">
          <Input
            v-model="createFormItem.topice_str"
            :placeholder="createFormItem.topice_type == 0 ? '点击按钮选择职位' : '点击按钮选择企业'"
            style="width:200px"
          ></Input>
          <Button
            type="primary"
            @click="openSelector(createFormItem.topice_type)"
            style="margin-left:10px"
          >选择</Button>
        </FormItem>
        <FormItem label="专题图片">
          <div v-if="createFormItem.topice_image" style="width:175px;cursor:pointer;">
            <img :src="createFormItem.topice_image" style="width:100px;height:80px;" />
            <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
          </div>
          <div
            v-else
            class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
            style="margin-top: -10px;"
          >
            <span>+ 添加图片</span>
            <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
          </div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" @click="createTopice">确定</Button>
      </div>
    </Modal>

    <!-- 职位选择器 -->
    <Modal
      :styles="{top: '5px'}"
      v-model="jobSelectorSwitch"
      title="职位选择"
      @on-ok="confirmJobSelector"
      :ok-text="jobOkText"
      width="850"
    >
      <div style="height:552px;">
        <Form
          :model="jobSelectorFormItem"
          :label-width="100"
          style="display:flex;flex-direction:row;flex-wrap:wrap;"
          class="searchForm"
          z-index="2000"
        >
          <FormItem label="职位类别" style="margin-bottom: 8px;">
            <div style="display:flex;flex-direction:row;">
              <!-- 一级行业 -->
              <Select
                v-model="jobSelectorFormItem.industry_id"
                style="margin-right:10px;width:100px"
                @on-change="getTwoMenu"
              >
                <!-- <Option :value="zero">全部</Option> -->
                <Option
                  v-for="(item,index) in oneMenu"
                  :key="item.industry_id"
                  :value="item.industry_id"
                >{{item.industry_title}}</Option>
              </Select>
              <!-- 二级行业 -->
              <Select
                v-model="jobSelectorFormItem.position_id"
                style="width:100px;"
                @on-change="getPosition"
              >
                <!-- <Option :value="zero">全部</Option> -->
                <Option
                  v-for="(item,index) in twoMenu"
                  :key="item.position_id"
                  :value="item.position_id"
                >{{item.position_title}}</Option>
              </Select>
            </div>
          </FormItem>

          <!-- style="height:50px" -->
          <FormItem label="工作区域" style="margin-bottom: 8px;">
            <Select v-model="jobSelectorFormItem.area_id" style="margin-right:10px;width:100px">
              <Option
                v-for="(item,index) in saasArea"
                :key="item.code"
                :value="item.code"
              >{{item.name}}</Option>
            </Select>
          </FormItem>

          <FormItem label="薪资范围" style="margin-bottom: 8px;">
            <div style="display:flex;">
              <Select
                v-model="jobSelectorFormItem.salary.salary_unit"
                style="margin-right:10px;width:100px"
              >
                <Option v-for="(item,index) in salaryType" :key="index" :value="index+1">{{item}}</Option>
              </Select>
              <Input
                v-model="jobSelectorFormItem.salary.salary_min"
                placeholder="专题名称"
                style="width:100px"
              ></Input>
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <Input
                v-model="jobSelectorFormItem.salary.salary_max"
                placeholder="专题名称"
                style="width:100px"
              ></Input>
              <span>&nbsp;&nbsp;元</span>
              <Checkbox style="margin-left:5px" v-model="jobSelectorFormItem.salary.other">面议</Checkbox>
            </div>
          </FormItem>

          <div style="display:flex;margin-left:20px">
            <Select
              v-model="jobSelectorFormItem.job_education"
              style="margin-right:10px;width:100px"
            >
              <Option v-for="(item,index) in educationArr" :key="index" :value="index">{{item}}</Option>
            </Select>

            <Select v-model="jobSelectorFormItem.gender" style="margin-right:10px;width:100px">
              <Option v-for="(item,index) in gender" :key="index" :value="index">{{item}}</Option>
            </Select>
          </div>

          <FormItem label="年龄选择" style="margin-bottom: 8px;">
            <div style="display:flex;">
              <Input v-model="jobSelectorFormItem.age_min" placeholder="年龄最低数值" style="width:90px"></Input>
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <Input v-model="jobSelectorFormItem.age_max" placeholder="年龄最高数值" style="width:90px"></Input>
            </div>
          </FormItem>

          <FormItem label="工作经验" style="margin-bottom: 8px;">
            <div style="display:flex;">
              <Input
                v-model="jobSelectorFormItem.job_experience_min"
                placeholder="工龄最低数值"
                style="width:90px"
              ></Input>
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <Input
                v-model="jobSelectorFormItem.job_experience_max"
                placeholder="工龄最高数值"
                style="width:90px"
              ></Input>
              <Checkbox style="margin-left:20px" v-model="jobSelectorFormItem.is_open_resume">悬赏红包</Checkbox>
            </div>
          </FormItem>

          <FormItem label="关键字搜索" style="margin-bottom: 8px;">
            <Input
              v-model="jobSelectorFormItem.keyword"
              placeholder="请输入职位名称或者企业名称"
              style="width:300px"
            ></Input>

            <Button style="margin-left:20px" type="primary" @click="searchJobSelectorData">搜索</Button>
          </FormItem>
        </Form>
        <TableList
          :tableSize="jobSelectorTableSize"
          :columns="jobSelectorColumns"
          :data="jobSelectorList"
          :page="jobSelectorFormItem.page"
          :total="jobSelectorFormItem.pageTotal*jobSelectorFormItem.pageNum"
          :pageNum="jobSelectorFormItem.pageNum"
          :tableTitle="jobSelectorTableTitle"
          @changePage="changeJobSelectorPage"
        ></TableList>
        <!-- <div>
          <Checkbox v-model="single">Checkbox</Checkbox>
          <span>全选 （共xxx个职位）</span>
        </div>-->
      </div>
      <div style="margin-top: 15px;">
        <div class="tagContianer">
          <Tag
            v-if="jobSelectedSimpleList.length"
            v-for="(item,index) in jobSelectedSimpleList"
            :key="item.job_id"
            :name="item.job_id"
            closable
            class="tag"
            @on-close="jobTagClose"
          >{{(item.job_title != '') ? item.job_title : item.position_title}}</Tag>
        </div>
      </div>
    </Modal>

    <!-- 商家选择器 -->
    <Modal
      :styles="{top: '5px'}"
      v-model="companySelectorSwitch"
      title="商家选择"
      :ok-text="companyOkText"
      @on-ok="confirmCompanySelector"
      width="850"
    >
      <div style="height:420px;">
        <Form
          :model="companySelectorFormItem"
          :label-width="100"
          style="display:flex;flex-direction:row;flex-wrap:wrap;"
          class="searchForm"
          z-index="2000"
        >
          <FormItem label="工作区域" style="margin-bottom: 8px;">
            <Select v-model="companySelectorFormItem.area_id" style="margin-right:5px;width:100px">
              <Option
                v-for="(item,index) in saasArea"
                :key="item.code"
                :value="item.code"
              >{{item.name}}</Option>
            </Select>
          </FormItem>

          <FormItem label="企业规模" style="margin-bottom: 8px;">
            <Select
              v-model="companySelectorFormItem.scale"
              style="margin-right:5px;margin-left:0px;width:100px"
            >
              <Option v-for="(item,index) in scaleList" :key="index" :value="index">{{item}}</Option>
            </Select>
          </FormItem>

          <FormItem label="关键字搜索" style="margin-bottom: 8px;">
            <Input
              v-model="companySelectorFormItem.keyword"
              placeholder="请输入企业ID或者企业名称"
              style="width:200px"
            ></Input>

            <Button style="margin-left:20px" type="primary" @click="searchCompanySelectorData">搜索</Button>
          </FormItem>
        </Form>

        <TableList
          :tableSize="companySelectorTableSize"
          :columns="companySelectorColumns"
          :data="companySelectorList"
          :page="companySelectorFormItem.page"
          :total="companySelectorFormItem.pageTotal*companySelectorFormItem.pageNum"
          :pageNum="companySelectorFormItem.pageNum"
          :tableTitle="companySelectorTableTitle"
          @onchangeSelect="changeCompanyPool"
          @changePage="changeCompanySelectorPage"
        ></TableList>
        <!-- <div>
          <Checkbox v-model="single">Checkbox</Checkbox>
          <span>全选 （共xxx个职位）</span>
        </div>-->
      </div>
      <div style="margin-top: 15px;">
        <div class="tagContianer">
          <Tag
            v-if="companySelectedSimpleList.length"
            v-for="(item,index) in companySelectedSimpleList"
            :key="item.company_id"
            :name="item.company_id"
            closable
            class="tag"
            @on-close="companyTagClose"
          >{{item.title}}</Tag>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import upload from "base/upload/upload";
import TableList from "@/components/consumer/tableList";
import { TopiceList, TopiceCreate, TopiceEdit, TopiceDelete, JobSelector, CompanySelector, SaasAreas } from "api/recuit/setting";
import { Industry, Areas } from "api/recuit/public";
import _ from 'lodash'
import { objectDeepCopy } from "common/js/util";

export default {
  name: "publicAccount",
  data () {
    return {
      formItem: {
        page: 1,
        pageNum: 10,
        pageTotal: "",
        keyword: "",
        type: ""
      },
      createFormItem: {
        topice_id: 0,
        topice_name: '',
        topice_type: 0,
        topice_image: '',
        topice_str: '',
      },
      jobSelectorFormItem: {
        page: 1,
        pageNum: 5,
        pageTotal: "",
        industry_id: 0,
        position_id: 0,
        job_type: 0,
        area_id: '',
        age: '',
        age_min: '',
        age_max: '',
        experience: '',
        job_experience_min: '',
        job_experience_max: '',
        job_education: 0,
        gender: 0,
        salary: {
          salary_unit: 0,//薪资 单位 1月薪 2日薪 3时薪
          salary_min: 0,
          salary_max: 0,
          other: 0,//面议
        },
        is_open_resume: 0,
        keyword: ''
      },
      jobSelectorList: [],//职位选择器数据
      // jobSelectedList: [],//已选中的职位数据
      jobSelectedSimpleList: [],//已选中的职位数据（方便页面渲染）
      jobSelectorColumns: [
        {
          title: "",
          width: 60,
          align: 'center',
          renderHeader: (h, params) => {
            let selectedCount = 0;
            _.map(this.jobSelectorList, (info) => {
              let jobIndex = _.find(this.jobSelectedSimpleList, { 'job_id': info.job_id })
              if (!_.isNil(jobIndex)) {
                selectedCount++
              }
            });

            // console.log(this.jobSelectorList.length, 'jobSelectorList.length')
            // console.log(selectedCount, 'selectedCount')
            return h(
              "Checkbox",
              {
                props: {
                  value: (this.jobSelectorList.length == selectedCount) ? true : false
                },
                style: {

                },
                on: {
                  'on-change': (data) => {
                    this.changeAllSelected('job', data)
                  }
                }
              },
              ''
            );
          },
          render: (h, params) => {
            let jobIndex = _.find(this.jobSelectedSimpleList, { 'job_id': params.row.job_id })
            let selectIndex = !_.isNil(jobIndex) ? true : false;
            // console.log(this.jobSelectedSimpleList, 'jobSelectedSimpleList')
            return h(
              "Checkbox",
              {
                props: {
                  value: selectIndex ? true : false
                },
                style: {},
                on: {
                  'on-change': (data) => {
                    this.changeSelected('job', data, params.row)
                  }
                }
              },
              ''
            );
          }
        },
        {
          title: "职位ID",
          key: "job_id",
          width: 100,
        },
        {
          title: "职位名称",
          key: "job_title",
          minWidth: 20,
          render: (h, params) => {
            return h(
              "span",
              {},
              (params.row.job_title != '') ? params.row.job_title : params.row.position_title
            );
          }
          // width: 150
        },
        {
          title: "企业名称",
          key: "title",
          minWidth: 20
        },
        {
          title: "薪资",
          key: "salary_min",
          minWidth: 20,
          renderTitle: {

          },
          render: (h, params) => {
            return h(
              "span",
              {},
              (params.row.salary_unit && params.row.salary_unit == 4) ? '面议' : params.row.salary_min + '-' + params.row.salary_max + '元/' + this.salaryUnitArr[params.row.salary_unit]
            );
          }
        }
      ],
      companySelectorFormItem: {
        page: 1,
        pageNum: 5,
        pageTotal: "",
        scale: 1,
        area_id: '',
        keyword: ''
      },
      companySelectorList: [],//商家选择器数据
      // companySelectedList: [],//已选中的商家数据
      companySelectedSimpleList: [],//已选中的商家数据（方便页面渲染）
      companySelectorColumns: [
        {
          title: "",
          width: 60,
          align: 'center',
          renderHeader: (h, params) => {
            let selectedCount = 0;
            _.map(this.companySelectorList, (info) => {
              let companyIndex = _.find(this.companySelectedSimpleList, { 'company_id': info.company_id })
              if (!_.isNil(companyIndex)) {
                selectedCount++
              }
            });

            return h(
              "Checkbox",
              {
                props: {
                  value: (this.companySelectorList.length == selectedCount) ? true : false
                },
                style: {

                },
                on: {
                  'on-change': (data) => {
                    this.changeAllSelected('company', data)
                  }
                }
              },
              ''
            );
          },
          render: (h, params) => {
            let companyIndex = _.find(this.companySelectedSimpleList, { 'company_id': params.row.company_id })
            let selectIndex = !_.isNil(companyIndex) ? true : false;

            return h(
              "Checkbox",
              {
                props: {
                  value: selectIndex ? true : false
                },
                style: {},
                on: {
                  'on-change': (data) => {
                    this.changeSelected('company', data, params.row)
                  }
                }
              },
              ''
            );
          }
        },
        {
          title: "企业ID",
          key: "company_id",
          width: 130
        },
        {
          title: "企业名称",
          key: "title",
          minWidth: 20
        },
        {
          title: "在找职位",
          key: "onlineJob",
          minWidth: 20
        },
      ],
      zero: 0,
      tableTitle: '专题列表',
      jobSelectorTableTitle: '职位列表',
      jobSelectorTableSize: 'small',
      jobOkText: '确定',
      companySelectorTableTitle: '企业列表',
      companySelectorTableSize: 'small',
      companyOkText: '确定',
      resultList: [],//充值流水数据
      columns: [
        {
          title: "专题ID",
          key: "topice_id",
          width: 100
        },
        {
          title: "专题名称",
          key: "topice_name",
          minWidth: 20,
          // width: 150
        },
        {
          title: "专题类型",
          key: "topice_name",
          minWidth: 20,
          render: (h, params) => {
            return h(
              "span",
              {
                props: {

                },
                style: {

                }
              },
              (params.row.topice_type == 0) ? '职位专题' : '企业专题'
            );
          }
        },
        {
          title: "专题图片",
          key: "topice_image",
          minWidth: 20,
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.topice_image,
                alt: '',
              },
              style: {
                width: '100px',
                height: '60px',
              },
            }, '');
          }
        },
        {
          title: "创建时间",
          key: "time_create",
          minWidth: 20
        },
        {
          title: "操作",
          key: "action",
          minWidth: 60,
          // width: 180,
          align: "center",
          render: (h, params) => {
            return h("span", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    margin: "0 1px"
                  },
                  on: {
                    click: () => {
                      this.openTopiceEditPage(params.row)
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "middle"
                  },
                  style: {
                    margin: "0 1px"
                  },
                  on: {
                    click: () => {
                      this.topiceDelete({
                        topice_id: params.row.topice_id
                      })
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      newTopice: false,
      jobSelectorSwitch: false,
      companySelectorSwitch: false,

      oneMenu: [], //行业一级菜单
      twoMenu: [], //行业二级菜单
      gender: ["性别不限", "男", "女"],
      salaryType: ["月薪", "日薪", "时薪"],
      salaryUnitArr: ["", "月", "日", "时"],
      scaleList: ['全部', '10人以下', '10-20人', '20-50人', '50-100人', '100人以上'],//企业规模
      educationArr: [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      experienceArr: [
        "经验不限",
        "无经验",
        "1年",
        "2年",
        "3年",
        "4年",
        "5年",
        "6年",
        "7年",
        "8年",
        "9年",
        "10年"
      ],
      saasArea: [], //代理区域
    };
  },
  components: { TableList, upload },
  computed: {},
  mounted () {
    this.getData()
  },
  watch: {
    companySelectedSimpleList: function (data) {
      this.companyOkText = '确定(' + this.companySelectedSimpleList.length + ')'
    },
    jobSelectedSimpleList: function (data) {
      this.jobOkText = '确定(' + this.jobSelectedSimpleList.length + ')'
    },
  },
  methods: {
    /////////////////////////////////////page////////////////////////////////////////////////
    //切换页数
    changePage (pageInfo) {
      this.formItem.page = pageInfo.page;
      this.getData();
    },
    //条件查询
    searchData () {
      this.formItem.page = 1;
      this.getData();
    },
    async getData () {
      let apiResult = await TopiceList(this.formItem).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      this.resultList = apiResult.menuList
      this.formItem.pageTotal = apiResult.page.pageTotal
    },
    //打开选择器
    openSelector (type) {
      //获取一级行业信息
      Industry().then(result => {
        this.oneMenu.push({
          industry_id: 0,
          industry_title: '全部',
          industry_id: 0,
          parent_id: 0,
          position: []
        });
        for (let i = 0; i < result.length; i++) {
          this.oneMenu.push(result[i]);
        }

        if (this.jobSelectorFormItem.industry_id > 0) {
          this.getTwoMenu(this.jobSelectorFormItem.industry_id)
        }
      });

      // console.log(this.oneMenu, 'oneMenu')
      // console.log(this.jobSelectorFormItem.industry_id, 'industry_id')

      //获取区域代理
      SaasAreas().then(areaInfo => {
        Areas({ citiesCode: areaInfo.city_code }).then(result => {
          this.saasArea = result.areas
        });
      });

      if (type == 0) {
        this.getJobSelectorData(this.jobSelectorFormItem, true)
        this.jobSelectorSwitch = true
      }
      if (type == 1) {
        this.getCompanySelectorData(this.companySelectorFormItem, true)
        this.companySelectorSwitch = true
      }
    },
    /////////////////////////////////////////job////////////////////////////////////////////
    //切换页数
    changeJobSelectorPage (pageInfo) {
      this.jobSelectorFormItem.page = pageInfo.page;
      this.getJobSelectorData(this.jobSelectorFormItem);
    },
    //条件查询
    searchJobSelectorData () {
      this.jobSelectorFormItem.page = 1;
      this.getJobSelectorData(this.jobSelectorFormItem);
    },
    //获取职位数据
    async getJobSelectorData (form, isFirst = false) {
      //组合age字段
      if (form.age_max && form.age_min) {
        form.age = form.age_min + ',' + form.age_max
      } else {
        form.age = ''
      }

      //组合经验字段
      if (form.job_experience_max && form.job_experience_min) {
        form.experience = form.job_experience_min + ',' + form.job_experience_max
      } else {
        form.experience = ''
      }

      //最外层页面全新打开、刷新页面，select标记会消失
      if (this.createFormItem.topice_str && isFirst) {
        //搜索已选中的id，对jobSelectedList进行填充
        let selectedResult = await JobSelector({
          page: 1,
          pageNum: 200,
          jobIds: this.createFormItem.topice_str
        }).catch(
          (err) => {
            this.$Message.error('系统错误，请联系技术人员。' + err)
          }
        );

        if (selectedResult.jobList.length) {
          this.jobSelectedSimpleList = selectedResult.jobList
        }
      }

      //职位选择器数据
      let apiResult = await JobSelector(form).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );
      this.jobSelectorList = apiResult.jobList

      this.jobSelectorFormItem.pageTotal = apiResult.page.pageTotal
    },

    //关闭tag标签
    jobTagClose (event, job_id) {
      let data = _.filter(this.jobSelectedSimpleList, (info) => {
        if (info.job_id == job_id) {
          return false
        } else {
          return true
        }
      });
      this.jobSelectedSimpleList = data
    },
    //保存职位选择器
    confirmJobSelector () {
      let jobSelectorStr = ''
      let jobListArr = []
      let jobListSet = new Set();

      _.forEach(this.jobSelectedSimpleList, (info, key) => {
        if (!_.isNil(info)) {
          // jobSelectorStr = jobSelectorStr + ',' + info.job_id
          jobListSet.add(info.job_id);
          jobListArr = [...jobListSet]
        }
      });

      if (jobListArr.length) {
        jobSelectorStr = jobListArr.map((item) => item).join(',')
      }

      this.createFormItem.topice_str = jobSelectorStr
    },
    //选中、取消选中
    changeSelected (type, opt, row) {
      switch (type) {
        case 'job':
          if (opt) {
            //追加
            this.jobSelectedSimpleList.push(row)
          } else {
            //删除
            this.jobSelectedSimpleList = _.filter(this.jobSelectedSimpleList, (info) => {
              if (info.job_id == row.job_id) {
                return false
              }
              return true
            });
          }
          break;
        case 'company':
          if (opt) {
            //追加
            this.companySelectedSimpleList.push(row)
          } else {
            //删除
            this.companySelectedSimpleList = _.filter(this.companySelectedSimpleList, (info) => {
              if (info.company_id == row.company_id) {
                return false
              }
              return true
            });
          }
          break;
      }
    },
    //全选、取消全选
    changeAllSelected (type, opt) {
      switch (type) {
        case 'job':
          if (opt) {
            if (!this.jobSelectedSimpleList.length) {
              this.jobSelectedSimpleList = [...this.jobSelectorList]
            } else {
              let list = objectDeepCopy(this.jobSelectedSimpleList);

              //添加select 标记
              _.map(this.jobSelectorList, (info) => {
                let index = _.find(list, { 'job_id': info.job_id })
                if (_.isNil(index)) {
                  this.jobSelectedSimpleList.push(info)
                }
              });
            }
          } else {
            let jobIdList = _.map(this.jobSelectorList, 'job_id');
            let list = objectDeepCopy(this.jobSelectedSimpleList);

            //删除
            this.jobSelectedSimpleList = _.filter(list, (info) => {
              if (_.indexOf(jobIdList, info.job_id) >= 0) {
                return false
              }
              return true
            });
          }
          break;
        case 'company':
          if (opt) {
            if (!this.companySelectedSimpleList.length) {
              this.companySelectedSimpleList = [...this.companySelectorList]
            } else {
              let list = objectDeepCopy(this.companySelectedSimpleList);

              //添加select 标记
              _.map(this.companySelectorList, (info) => {
                let index = _.find(list, { 'company_id': info.company_id })
                if (_.isNil(index)) {
                  this.companySelectedSimpleList.push(info)
                }
              });
            }
          } else {
            let companyIdList = _.map(this.companySelectorList, 'company_id');
            let list = objectDeepCopy(this.companySelectedSimpleList);

            //删除
            this.companySelectedSimpleList = _.filter(list, (info) => {
              if (_.indexOf(companyIdList, info.company_id) >= 0) {
                return false
              }
              return true
            });
          }
          break;
      }
    },
    /////////////////////////////////////////company////////////////////////////////////////////
    //切换页数
    changeCompanySelectorPage (pageInfo) {
      this.companySelectorFormItem.page = pageInfo.page;
      this.getCompanySelectorData(this.companySelectorFormItem);
    },
    //条件查询
    searchCompanySelectorData () {
      this.companySelectorFormItem.page = 1;
      this.getCompanySelectorData(this.companySelectorFormItem);
    },
    //获取商家数据
    async getCompanySelectorData (form, isFirst = false) {
      //最外层页面全新打开、刷新页面，select标记会消失
      if (this.createFormItem.topice_str && isFirst) {
        //搜索已选中的id，对jobSelectedList进行填充
        let selectedResult = await CompanySelector({
          page: 1,
          pageNum: 200,
          companyIds: this.createFormItem.topice_str
        }).catch(
          (err) => {
            this.$Message.error('系统错误，请联系技术人员。' + err)
          }
        );

        if (selectedResult.companyList.length) {
          this.companySelectedSimpleList = selectedResult.companyList
        }
      }

      let apiResult = await CompanySelector(form).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      // console.log(apiResult, 'apiResult')
      this.companySelectorList = apiResult.companyList
      this.companySelectorFormItem.pageTotal = apiResult.page.pageTotal
    },

    //关闭tag标签
    companyTagClose (event, company_id) {
      let data = _.filter(this.companySelectedSimpleList, (info) => {
        if (info.company_id == company_id) {
          return false
        } else {
          return true
        }
      });
      this.companySelectedSimpleList = data
    },
    //保存商家选择器
    confirmCompanySelector () {
      let companySelectorStr = ''
      let companyListArr = []
      let companyListSet = new Set();

      _.forEach(this.companySelectedSimpleList, (info, key) => {
        if (!_.isNil(info)) {
          companyListSet.add(info.company_id);
          companyListArr = [...companyListSet]
        }
      });

      if (companyListArr.length) {
        companySelectorStr = companyListArr.map((item) => item).join(',')
      }

      this.createFormItem.topice_str = companySelectorStr

      // console.log(this.createFormItem.topice_str, 'topice_str')
    },
    /////////////////////////////////////////////////////////////////////////////////////

    //新建专题栏窗口
    openTopiceEditPage (info = '') {
      if (info) {
        if (info.topice_param) {
          let topice_param = JSON.parse(info.topice_param)
          if (_.isObject(topice_param)) {

            if (info.topice_type == 0) {
              this.jobSelectorFormItem = topice_param
            }

            if (info.topice_type == 1) {
              this.companySelectorFormItem = topice_param
            }
          }
        } else {
          if (info.topice_type == 0) {
            this.jobSelectorFormItem = this.initJobFormItem()
          }

          if (info.topice_type == 1) {
            this.companySelectorFormItem = this.initCompanyFormItem()
          }
        }

        // console.log(info)
        this.newTopice = true

        this.createFormItem.topice_name = info.topice_name
        this.createFormItem.topice_type = info.topice_type
        this.createFormItem.topice_image = info.topice_image
        this.createFormItem.topice_str = info.topice_str
        this.createFormItem.topice_id = info.topice_id
        // console.log(info, 9898989)
      } else {
        //打开全新专题
        this.newTopice = true
        this.createFormItem.topice_name = ''
        this.createFormItem.topice_type = 0
        this.createFormItem.topice_image = ''
        this.createFormItem.topice_str = ''
      }
    },
    //初始化job表单
    initCompanyFormItem () {
      return {
        page: 1,
        pageNum: 5,
        pageTotal: "",
        scale: 1,
        area_id: '',
        keyword: ''
      };
    },
    //初始化company表单
    initJobFormItem () {
      return {
        page: 1,
        pageNum: 5,
        pageTotal: "",
        industry_id: 0,
        position_id: 0,
        job_type: 0,
        area_id: '',
        age: '',
        age_min: '',
        age_max: '',
        experience: '',
        job_experience_min: '',
        job_experience_max: '',
        job_education: 0,
        gender: 0,
        salary: {
          salary_unit: 0,//薪资 单位 1月薪 2日薪 3时薪
          salary_min: 0,
          salary_max: 0,
          other: 0,//面议
        },
        is_open_resume: 0,
        keyword: ''
      };
    },
    //删除topice
    topiceDelete (deleteData) {
      TopiceDelete(deleteData).then(res => {
        // console.log(res)
        this.$Message.success("删除成功")
        this.getData()
      });
    },
    //创建专题
    createTopice () {
      // console.log(this.createFormItem, 'createFormItem')
      if (!this.createFormItem.topice_name) {
        this.$Message.error("请填写专题名称")
        return
      }

      if (!this.createFormItem.topice_str) {
        this.$Message.error("请先选择职位/企业")
        return
      }

      if (this.createFormItem.topice_type == 0) {
        this.createFormItem.topice_param = JSON.stringify(this.jobSelectorFormItem)
      }

      if (this.createFormItem.topice_type == 1) {
        this.createFormItem.topice_param = JSON.stringify(this.companySelectorFormItem)
      }

      TopiceCreate(this.createFormItem).then(res => {
        this.$Message.success("创建成功")
        setTimeout(() => {
          this.$router.go(0)
        }, 1500);
      });
    },
    //替换图片
    changeImg (_url) {
      this.createFormItem.topice_image = _url[0];
    },
    //点击实现行业二级菜单
    getTwoMenu (industry_id) {
      let oneMenu = this.oneMenu;

      // console.log(industry_id, 'industry_id9')
      // console.log(oneMenu, 'oneMenu9')
      for (let i = 0; i < oneMenu.length; i++) {
        if (industry_id == oneMenu[i].industry_id && oneMenu[i].position.length) {
          this.twoMenu = oneMenu[i].position;

          this.twoMenu.unshift({
            display_status: 1,
            position_id: 0,
            position_title: "全部"
          })
        }
      }
      // debugger
      // console.log(this.twoMenu, 'twoMenu')

      if (this.positionCount >= 1) {
        this.jobSelectorFormItem.position_id = '';
      }

      this.positionCount++
      this.jobSelectorFormItem.industry_id = industry_id;
    },
    getPosition (position_id) {
      this.jobSelectorFormItem.position_id = position_id;
    },
    changeRadioGroup (index) {
      this.createFormItem.topice_str = ''
    }
  }
};
</script>

<style scoped lang="less">
.search {
  box-sizing: border-box;
  background: #fff;
}
.brand-item-environment {
  width: 214px;
  height: 120px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-top: 10px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}

.new-add-brand-item-environment {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-left: 15px;
  cursor: pointer;
  width: 80px;
  height: 80px;
  margin-top: 29px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}
.tagContianer {
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
  max-height: 103px;
  min-height: 1px;
  overflow-y: scroll;
}
.tag {
  height: 26px;
  text-align: center;
  line-height: 26px;
}
</style>
